所有的網頁的 HTML 內容都是由標籤組成，呈現的「基本架構」也都差不多，差別只在於內容組成、編排、框架、樣式...等的不同 ( 就像每個人類的身體骨架結構都相同，差別在於外貌、才智、個性...等 )，這篇文章會介紹 HTML 的標籤以及架構組成。
原文參考：HTML 標籤與架構
HTML 裡所有元素都是透過「標籤」組成，而元素又分成基本元素、空元素和巢狀元素，元素的標籤組成關係如下圖所示：
HTML 的大部分元素都是「基本元素」，又可稱作「容器標籤」，其架構如下表所示：
| 寫法 | 功能 | 說明 |
|---|---|---|
<tag> |
起始標籤 ( Opening tag ) | 在「大於、小於」符號的中間放入元素名稱，代表這個元素從這裡開始。 |
</tag> |
結束標籤 ( Closing tag ) | 在「大於、小於」符號的中間放入元素名稱，但前方需要加上斜線，代表這個元素在這裡結束。 |
| 內容 ( Content ) | 在起始標籤和結束標籤中間的內容。 | |
| 元素 ( Element ) | 由起始標籤、結束標籤和內容所組合成。 |
下方的 HTML 在網頁開啟後，會在網頁裡出現一個 <h1></h1> 大標題元素以及 <p></p> 內容元素。
<h1>我是大標題</h1>
<p>我是內容</p>
「沒有內容」的元素稱作「空元素」( 例如圖片<img>)，也可稱作「單一標籤」，使用時只要直接使用即可，下方的 HTML 在網頁開啟後，會在網頁裡出現一張圖片。
<img src="oxxostudio/demo.jpg">
如果元素裡面還有其他元素，可以稱作「巢狀元素」，所架構出的結構稱為「巢狀結構」，下方的 HTML 會在 <p></p> 元素裡使用 <strong></strong> 標籤，將想要強調的文字框住，使其變成預設粗體字的新元素。
<p>大家好，我是 <strong>OXXO.STUDIO</strong></p>
HTML 所有的元素都可以設定「屬性 ( Attribute )」，屬性包含「名稱與值」，除了可以使用預設的屬性，也能使用自訂名稱的屬性，透過屬性的設定，能夠替元素增加更多不同的特色 ( 例如色彩、對齊方式、圖表的格線...等 )，屬性基本寫法如下 ( 更多屬性可以參考：HTML 元素屬性 )：
- 元素名稱和屬性之間必須有一個空格（ 如果有多個屬性，屬性之間也需要有空格 ）。
- 屬性名稱後面接著等於符號「
=」，等於符號後方表示屬性的內容 (值 )，需要使用雙引號「"」包覆。
透過網頁開啟下方的 HTML，會在網頁裡出現一個超連結，超連結的連結屬性 src 指向 Google 搜尋的網頁。
<a href="https://www.google.com">連結到 Google 搜尋</a>
網頁的各個元素都會有各自的屬性，當中最常使用的是「id」和「class」屬性，id 表示「唯一的名稱」，class 表示「類別」，相關說明如下：
| 屬性 | 說明 |
|---|---|
| id | 元素在網頁中的唯一名稱，網頁中每個 id 只會「出現一次」，如果出現多次，則以最後一個為主。 |
| class | 元素在網頁中的類別，一個元素可以有多個類別，多個類別之間需要用一個空白隔開，不同元素也可以使用相同名稱的類別。 |
下方的 HTML 裡的<h1></h1>具有 id 和一個 class，<p></p>則具有兩個 class。
<h1 id="title" class="red">大標題</h1>
<p class="red small">我是內文</p>
一個網頁的基本架構主要由<!DOCTYPE html>和三個主要元素所構成，這些元素都是「必須存在」且「不可更改其標籤」，相關說明如下：
| 元素 | 說明 |
|---|---|
<!DOCTYPE html> |
定義 HTML 的類型（ doctype ），只要是網頁都會需要放入這段程式碼。 |
<html></html> |
根元素，包含了所有顯示在這個頁面上的內容。 |
<head></head> |
head 元素，網頁不會被使用者看到，但卻是必須具備的重要資訊 ( 例如網頁標題、頁面說明、CSS...等 )。 |
<body></body> |
body 元素，所有要讓使用者看到的內容。 |
下方的 HTML 表示一個網頁的基本架構，<head></head>裡會包含其他許多像是<meta>等不會被看到的資訊 ( 提供給瀏覽器或搜尋引擎看的 )，<body></body>裡則是要給使用者看到所有內容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<h1>OXXO.STUDIO</h1>
<a src="https://www.google.com">連結到 Google 搜尋</a>
</body>
</html>
從 HTML 的架構可以觀察到 HTML 其實是個層層包覆的「樹狀結構」，在樹狀結構裡，處於外層的元素稱作「父元素」，內層元素稱為「子元素」，父元素和子元素是一個「相對關係」，在身為別人的父元素的同時，可能也是另外一個元素的子元素，然而除了父元素和子元素，還有「子孫元素」、「祖先元素」和「兄弟元素」...等相對元素，例如下圖，將上述網頁的架構，採用樹狀結構的方式呈現：
不論是哪種網頁編輯軟體，產生的網頁基本架構幾乎都是相同，就算是自行撰寫 HTML，也必須要遵照基本的架構寫法，熟悉 HTML 架構後，就可以開始正式進行網頁的編輯。
大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^
iThome鐵人賽
看影片追技術